import { StyleSheet, 
  ImageBackground, 
  Text, 
  View, 
  Image,
  Button,
  TextInput,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import React, { useState } from 'react';

const RedTxt = (props)=>{
  return <Text style={styles.txtColor}>
    {props.content}
  </Text>
}
const RedTxt2 = (props)=>{
  return <Text style={styles.txtColor}>
    {props.children}
  </Text>
}
export default function App() {
  const [value,setValue] = useState('');
  return (
    <ScrollView style={[styles.container]}>
      {/* 封装背景组件 */}
        {/* <Bg 
          resizeMode='contain'
          source={require('./assets/s1.jpg')} 
          style={{width: '100%', height: 300}}
        >
          <Text style={styles.font}>自定义背景组件</Text>
          <Text>自定义背景组件</Text>
        </Bg> */}
        {/* <ImageBackground 
            source={require('./assets/s1.jpg')} 
            style={{width: '100%', height: 300}}
        >
            <Text style={styles.font}>Inside</Text>
        </ImageBackground> */}
      <Button
        onPress={()=>{}}
        title="按钮"
        color="#841584"
      />
      <TouchableOpacity 
        style={styles.btn}
        onPress={()=>console.log(1234)}
      >
        <Text style={{fontSize:20,color:'#fff'}}>
          常用按钮
        </Text>
      </TouchableOpacity>
      <TouchableOpacity 
        style={styles.btn}
        onPress={()=>console.log(1234)}
      >
        <Text style={{fontSize:20,color:'#fff'}}>
          常用按钮
        </Text>
      </TouchableOpacity>
      <TextInput 
        style={styles.input}
        placeholder='请输入'
        value={value}
        onChangeText={(text)=>setValue(text)}
      />
      <ImageBackground
        style={{width: 300,height: 300}}
        source={require('./assets/s2.jpg')}
      >
        <RedTxt content='自定义组件11'></RedTxt>
        <RedTxt2>自定义组件2</RedTxt2>
      </ImageBackground>
      <Image 
        style={{width: 100,height: 100}}
        resizeMode='cover'
        source={require('./assets/s1.jpg')}
      />
      <Image 
        style={{width: 200,height: 200}}
        source={{
          uri:'https://www.baidu.com/img/pc_9c5c85e6b953f1d172e1ed6821618b91.png'
        }}
      />
      <Text>Text01</Text>

      <RedTxt content='自定义组件'></RedTxt>
      <RedTxt2>自定义组件2</RedTxt2>

      <Text style={styles.txtColor}>
        <Text>Text02</Text>
        text 03
      </Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  btn: {
    height: 50,
    backgroundColor: '#f00',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20
  },
  input:{
    height: 50,
    borderColor: '#000',
    borderWidth: 1,
    margin: 20
  },
  container: {
    // flex: 1,
    // justifyContent: 'center'
  },
  bg: {
    backgroundColor: '#ccc',
  },
  txtColor: {
    color: '#f00',
    fontSize: 30
  }
});
